// pages/index/share.js
var $api = require('../../utils/api.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    canvasShow: false,
    qrCode: null,
    vehicleId: null,
    carDetails: null,
    description: "", //车辆描述语言
    posterUrl: "" //海报url地址
  },

  copy: function (event) {
    wx.setClipboardData({
      data: this.data.carDetails.content,
      success: function (res) {
        wx.showToast({
          title: '内容已复制',
          icon: 'success',
          duration: 2000
        })
      },
      fail: function(error) {
        console.log(error);
      }
    })
  },
  save: function (event) {
    wx.authorize({
      scope: 'scope.writePhotosAlbum',
      success() {
        // 授权成功
        wx.saveImageToPhotosAlbum({
          filePath: that.data.tempFilePath,
          success() {
            wx.saveImageToPhotosAlbum({
              filePath: this.data.posterUrl,
              success(res) {
                Toast.success('内容已复制');
              }
            })
          }
        })
      },
      fail: function () {
        // 授权失败
        wx.showModal({
          title: '提示',
          content: '您点击了拒绝授权,将无法正常保存图片,点击确定重新授权。',
          success: function (res) {
            if (res.confirm) {
              wx.openSetting({
                success: (res) => {
                  console.log('授权成功')
                }
              })
            }
          }
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      vehicleId: options.vehicleId
    })
    $api.getShareDetail({goods_id: options.vehicleId, phone: wx.getStorageSync('user_phone')}).then(res => {
      if(res.code==1){
        this.setData({
          carDetails: res.data.data,
          qrCode: res.data.img
        })
        this.draw();
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },
  draw: function (e) {
    const ctx = wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('#ffffff')
    ctx.fillRect(0, 0, 300, 400)
    const self = this
    wx.downloadFile({
      url: self.data.carDetails.image,
      success: function (res) {
        ctx.drawImage(res.tempFilePath, 0, 0, 300, 180)
        self.dealWords({
          ctx: ctx,//画布上下文
          fontSize: 16,//字体大小
          word: self.data.carDetails.brand_name + ' ' + self.data.carDetails.name + ' ' + self.data.carDetails.car_displacement + 'L',//需要处理的文字
          maxWidth: 300,//一行文字最大宽度
          x: 15,//文字在x轴要显示的位置
          y: 185,//文字在y轴要显示的位置
          maxLine: 2//文字最多显示的行数
        })

        // ctx.draw()
        ctx.setFillStyle('#333333')
        ctx.setFontSize(16)
        ctx.fillText(self.data.carDetails.Registration_time_text+"年"+'/' + self.data.carDetails.show_mileage + '万公里', 15, 270)

        ctx.setFillStyle('red')
        ctx.setFontSize(16)
        ctx.fillText('报价：' + self.data.carDetails.price + '万', 15, 295)

        self.drawUserAvatar(ctx);
        
        // self.saveImage()
      },
      fail: function (err) {

      }
    })
  },

  drawDescribe: function (ctx) {
    const self = this
    // const this = e;
    ctx.beginPath();
    const x = 65;
    const y = 340;
    const r = 5;
    const h = 50; const w = 230;
    ctx.strokeStyle = '#ffcc33';
    ctx.setFillStyle('#ffcc33')
    ctx.fillRect(x, y, w, h)
    ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r);
    // ctx.lineTo(w, 20);ctx.lineTo(w1, y+6);ctx.lineTo(w, y+10);
    ctx.arcTo(x + w, y + h, x, y + h, r); y + 4
    ctx.arcTo(x, y + h, x, y, r);
    ctx.lineTo(x, y + 20); ctx.lineTo(x - 5, y + 25); ctx.lineTo(x, y + 30);
    ctx.arcTo(x, y, x + w, y, r);
    ctx.fill('#ffcc33');
    ctx.closePath();
    ctx.stroke()
    // 描述语
    self.dealWords({
      ctx: ctx,//画布上下文
      fontSize: 10,//字体大小
      word: self.data.carDetails.content,//需要处理的文字
      maxWidth: w - 15,//一行文字最大宽度
      x: x + 10,//文字在x轴要显示的位置
      y: y,//文字在y轴要显示的位置
      maxLine: 2//文字最多显示的行数
    })
    // ctx.clip();
    // ctx.restore()
    
    self.setData({'canvasShow' : true});
  },

  drawUserAvatar: function (ctx) {
    const self = this
    let userInfo = wx.getStorageSync('userInfo');
    wx.downloadFile({
      url: userInfo.avatar,
      success: function (res) {
        ctx.save();
        ctx.beginPath();
        ctx.arc(35, 360, 20, 0, 2 * Math.PI, false);
        ctx.clip();
        ctx.drawImage(res.tempFilePath, 15, 340, 40, 40)
        ctx.restore()
        
        self.drawQrcode(ctx)
      },
      fail: function (err) {
        console.log(err);
      }
    })
  },
  drawQrcode(ctx) {
    const self = this
    wx.downloadFile({
      url: self.data.qrCode,
      success: function (res) {
        if (res.statusCode == 200) {
          
          self.drawDescribe(ctx);

          ctx.drawImage(res.tempFilePath, 210, 230, 70, 70)
          // ctx.setFillStyle('red')
          ctx.setFontSize(13)
          ctx.fillText('长按识别小程序', 200, 320)

          ctx.setFillStyle('red')
          ctx.setFontSize(12)
          ctx.fillText('查看车源详情', 210, 335)
          ctx.draw()
          
        }
      },
      fail :function(error) {
        console.log(error);
      }
    })
  },
  saveImage() {
    const self = this
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 300,
      height: 400,
      destWidth: 300*10,
      destHeight: 400*10 ,
      // fileType: 'jpg',
      // quality: 1,
      canvasId: 'myCanvas',
      success: function (res) {
        self.showCanvas = false
        wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success(res) {
                wx.showToast({
                  title: '已保存',
                  icon: 'success',
                  duration: 2000
                })
              },
              // fail(err) {
              //   wx.showToast({
              //     title: '',
              //     icon: 'none',
              //     duration: 2000
              //   })
              // }
            })
          },
          fail(error) {
            wx.showToast({
              title: '请先授权',
              icon: 'error',
              duration: 2000
            })
          }
        })
      },
      fail(err) {
        console.log('err', err)
      }
    })
  },

  dealWords: function (options) {
    options.ctx.setFillStyle('#333333')
    options.ctx.setFontSize(options.fontSize);//设置字体大小
    var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//实际总共能分多少行
    var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数
    var endPos = 0;//当前字符串的截断点
    for (var j = 0; j < count; j++) {
      var nowStr = options.word.slice(endPos);//当前剩余的字符串
      var rowWid = 0;//每一行当前宽度  
      if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果当前的字符串宽度大于最大宽度，然后开始截取
        for (var m = 0; m < nowStr.length; m++) {
          rowWid += options.ctx.measureText(nowStr[m]).width;//当前字符串总宽度
          if (rowWid > options.maxWidth) {
            if (j === options.maxLine - 1) { //如果是最后一行
              options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 18);  //(j+1)*18这是每一行的高度    
            } else {
              options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 18);
            }
            endPos += m;//下次截断点
            break;
          }
        }
      } else {//如果当前的字符串宽度小于最大宽度就直接输出
        options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18);
      }
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})